import React from 'react';
import { TouchableOpacity, Text, StyleSheet, ViewStyle, View } from 'react-native';
import { Colors } from '../constants/colors';

interface Props {
  title: string;
  onPress: () => void;
  disabled?: boolean;
  style?: ViewStyle;
  leftIcon?: React.ReactNode;
}

export default function PrimaryButton({ title, onPress, disabled = false, style, leftIcon }: Props) {
  return (
    <TouchableOpacity
      activeOpacity={0.9}
      onPress={onPress}
      disabled={disabled}
      style={[styles.btn, disabled && styles.disabled, style]}
    >
      <View style={styles.contentRow}>
        {leftIcon && <View style={{ marginRight: 8 }}>{leftIcon}</View>}
        <Text style={styles.text}>{title}</Text>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: {
    height: 56,
    borderRadius: 12,
    backgroundColor: Colors.primary,
    alignItems: 'center',
    justifyContent: 'center',
    shadowColor: Colors.black,
    shadowOpacity: 0.1,
    shadowRadius: 6,
    shadowOffset: { width: 0, height: 2 },
    elevation: 2,
  },
  contentRow: { flexDirection: 'row', alignItems: 'center', justifyContent: 'center' },
  text: {
    color: Colors.white,
    fontSize: 18,
    fontWeight: '700',
  },
  disabled: {
    opacity: 0.6,
  },
});

